<template>
  <div class="home">
    <div class="home-list">
      <div class="logo">
        <img src="../assets/images/logo.png" />
      </div>
      <div class="photo">
        <span class="photo-pic">
          <img src="../assets/images/menber1.jpg" />
        </span>
      </div>
      <div class="user-name">
        <span>yubeixin</span><br/>
        <span class="signature">这个人很懒,什么都没有留下</span>
      </div>
      <div class="module-list">
        <Menu class="menu-list" width="100%" accordion @on-select="route">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              人员资料管理
            </template>
            <MenuItem name="userInfo">基本资料</MenuItem>
            <MenuItem name="userQuery">查看成员资料</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-people"></Icon>
              会议管理
            </template>
            <MenuItem name="2-1">会议管理-1</MenuItem>
            <MenuItem name="2-2">会议管理-2</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="stats-bars"></Icon>
              请假分析
            </template>
            <MenuItem name="1-1">请假分析-1</MenuItem>
            <MenuItem name="1-2">请假分析-2</MenuItem>
            <MenuItem name="1-3">请假分析-3</MenuItem>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="ios-paper"></Icon>
              节假日管理
            </template>
            <MenuItem name="holiday">节假日管理-1</MenuItem>
            <MenuItem name="1-2">节假日管理-2</MenuItem>
            <MenuItem name="1-3">节假日管理-3</MenuItem>
          </Submenu>
        </Menu>
      </div>
    </div>
    <div class="home-box">
      <div class="home-context">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'Home',
  components: {
  },
  data() {
    return {
      openNames: [this.$route.matched[0].name]
    }
  },
  computed: {
  },
  methods: {
    route(name) {
      this.$router.push({ path: name })
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 380px auto;
}

.home-list {
  width: 380px;
  height: 100%;
  color: #fff;
  padding: 0 20px 0 8px;
  margin-right: 20px;
  border-right: 1px solid #fff;
  .logo img {
    width: 340px;
    margin-bottom: 40px;
  }
  .photo {
    text-align: center;
    .photo-pic {
      display: inline-block;
      width: 178px;
      height: 178px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 6px 4px rgba(248, 248, 248, .5);
      margin-bottom: 10px;
      img {
        width: 100%;
      }
    }
  }
  .user-name {
    text-align: center;
    font-size: 24px;
    margin-bottom: 45px;
    span {
      display: inline-block;
      padding: 8px;
      border-bottom: 1px solid #f8f8f8
    }
    .signature {
      font-weight: 100;
      padding: 15px;
      font-size: 14px;
      border: 0 none;
    }
  }
  .module-list {
    border-top: 1px solid #f8f8f8;
    padding-top: 20px;
    .menu-list {}
  }
}

.home-box {
  padding: 20px;
  width: ~'calc(100% - 380px)';
  height: 100%;
  min-width: 1100px;
  border: 1px solid #fff;
  margin-right: 8px;
  .home-context {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
  }
}
</style>
